<?php
/**
 * Created by PhpStorm.
 * User: KaZeline
 * Date: 15-4-27
 * Time: 上午10:18
 */

header("Content-type: text/html; charset=utf-8");
$type = 'map';
$mid = array(7517=>'厦门鼓浪屿',108=>'三亚休闲游',4=>'先行旅游');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>订单手机归属地统计图--testing</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <link href="http://www.12301.cc/js/echarts-2.2.1/doc/asset/css/font-awesome.min.css" rel="stylesheet">
    <link href="http://www.12301.cc/js/echarts-2.2.1/doc/asset/css/bootstrap.css" rel="stylesheet">
    <link href="http://www.12301.cc/js/echarts-2.2.1/doc/asset/css/carousel.css" rel="stylesheet">
    <link href="http://www.12301.cc/js/echarts-2.2.1/doc/asset/css/echartsHome.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="http://www.12301.cc/js/echarts-2.2.1/doc/example/www/js/echarts.js"></script>
    <script src="http://www.12301.cc/js/echarts-2.2.1/doc/asset/js/esl/esl.js"></script>
</head>

<body>
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head">
		<span>客源地分析</span>
        <form name="ti" action="" method="get">

            查询日期选择:<br/>
            <input id="threeDayTrigger" checked="checked" class="dateTrigger threeDayTrigger" type="radio" name="dateTrigger" value="<?=date('Y-m-d',strtotime('-1days'))?>"/><label for="threeDayTrigger">1天内</label>
            <input id="threeDayTrigger" class="dateTrigger threeDayTrigger" type="radio" name="dateTrigger" value="<?=date('Y-m-d',strtotime('-3days'))?>"/><label >3天内</label>
            <input id="weekTrigger" class="dateTrigger weekTrigger" type="radio" name="dateTrigger" value="<?=date('Y-m-d',strtotime('-7days'))?>"/><label for="weekTrigger">1周内</label>
            <input id="monthTrigger" class="dateTrigger monthTrigger" type="radio" name="dateTrigger" value="<?=date('Y-m-d',strtotime('-30days'))?>"/><label for="monthTrigger">1个月内</label>
            <input id="cType" type="hidden" value="map"/>
            景区ID:
            <select  name="lid" id="jqSelect">
                <option value="">请选择会员</option>
                <?foreach($mid as $k => $v){?>
                    <option value="<?=$k?>" <?if($k==$_GET['lid'])echo 'selected="selected"';?>><?=$v?></option>
                <?}?>
            </select>

        </form>
    </div>
    <div class="container featurette">
        <div class="row">
            <div id="graphic" class="col-md-12">
                <div id="main" style="height:400px;width:100%"></div>
            </div>
        </div>
    </div>
    <script src="http://www.12301.cc/js/echarts-2.2.1/doc/asset/js/jquery.min.js"></script>
    <script src="http://www.12301.cc/js/echarts-2.2.1/doc/asset/js/bootstrap.min.js"></script>
    <script>
        require.config({
            packages: [
                {
                    name: 'echarts',
                    location: 'http://echarts.baidu.com/src',
                    //location: 'http://www.12301.cc/js/echarts-2.2.1/src',
                    main: 'echarts'
                },
                {
                    name: 'zrender',
                    location: 'http://ecomfe.github.io/zrender/src',
//                    location: '../../../zrender/src',
                    main: 'zrender'
                }
            ]
        });
        var option = {
            tooltip : {
                trigger: 'item'
            },
            toolbox: {
                show : true,
                orient: 'vertical',
                x:'right',
                y:'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false}
                }
            },
            series : [
                {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}'
                    },
                    name: '选择器',
                    type: 'map',
                    mapType: 'china',
                    mapLocation: {
                        x: 'left',
                        y: 'top',
                        width: '30%'
                    },
                    roam: true,
                    selectedMode : 'single',
                    itemStyle:{
                        //normal:{label:{show:true}},
                        emphasis:{label:{show:true}}
                    },
                    data:[
                        {name: '北京', selected:false},
                        {name: '天津', selected:false},
                        {name: '上海', selected:false},
                        {name: '重庆', selected:false},
                        {name: '河北', selected:false},
                        {name: '河南', selected:false},
                        {name: '云南', selected:false},
                        {name: '辽宁', selected:false},
                        {name: '黑龙江', selected:false},
                        {name: '湖南', selected:false},
                        {name: '安徽', selected:false},
                        {name: '山东', selected:false},
                        {name: '新疆', selected:false},
                        {name: '江苏', selected:false},
                        {name: '浙江', selected:false},
                        {name: '江西', selected:false},
                        {name: '湖北', selected:false},
                        {name: '广西', selected:false},
                        {name: '甘肃', selected:false},
                        {name: '山西', selected:false},
                        {name: '内蒙古', selected:false},
                        {name: '陕西', selected:false},
                        {name: '吉林', selected:false},
                        {name: '福建', selected:false},
                        {name: '贵州', selected:false},
                        {name: '广东', selected:false},
                        {name: '青海', selected:false},
                        {name: '西藏', selected:false},
                        {name: '四川', selected:false},
                        {name: '宁夏', selected:false},
                        {name: '海南', selected:false},
                        {name: '台湾', selected:false},
                        {name: '香港', selected:false},
                        {name: '澳门', selected:false}
                    ]
                }
            ],
            animation: false
        };
//        var ecConfig = require(['echarts/config']);
//        console.log(ecConfig);
        $(".dateTrigger,#jqSelect").on("change",function(){
            var lid = getLid();
            var startTime = getStartTime();
            var cType = getType();
            if(!lid){
                console && console.log("缺省lid");
                return false;
            }
            if(!startTime){
                console && console.log("缺省startTime");
                return false;
            }
            if(!cType){
                console && console.log("缺省cType");
                return false;
            }
            PFT_GLOBAL.G.Ajax({
                url : "http://www.12301.cc/module/zax/baiduline/get_ticket.php",
                data : { lid:lid, btime3:startTime,type:cType},
                dataType : "json",
                type :'GET',
                loading : function(){
                    myChart.showLoading();
                },
                removeLoading : function(data){
                    myChart.hideLoading();
                },
                timeout : function(){console && console.log("获取数据超时")},
                serverError : function(){console &&
                console.log("接口出错www.12301.cc/module/zax/baiduline/get_ticket.php")}
            },function(res){
                _refresh(res);
            });

        })
        function _refresh(res){
            require(
                [
                    'echarts',
                    'echarts/chart/map'
                ],
                function (ec) {
                    var myChart = ec.init(document.getElementById('main'));
                    myChart.setOption(option);
                    var ecConfig = require('echarts/config');
                    myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){

                            var selected = param.selected;
                            var selectedProvince;
                            var name;
                            for (var i = 0, l = option.series[0].data.length; i < l; i++) {
                                name = option.series[0].data[i].name;
                                option.series[0].data[i].selected = selected[name];
                                if (selected[name]) {
                                    selectedProvince = name;
                                }
                            }
                            if (typeof selectedProvince == 'undefined') {
                                option.series.splice(1);
                                option.legend = null;
                                option.dataRange = null;
                                myChart.setOption(option, true);
                                return;
                            }
                            console.log(option.series[1]);
                            option.series[1] = {
                                name: '随机数据',
                                type: 'map',
                                mapType: selectedProvince,
                                itemStyle:{
                                    normal:{label:{show:true}},
                                    emphasis:{label:{show:true}}
                                },
                                mapLocation: {
                                    x: '35%'
                                },
                                roam: true
                            };
                        //get data

                        option.series[1]['data'] = [
                            {name: '南平市',value: Math.round(Math.random()*1000)},
                            {name: '三明市',value: Math.round(Math.random()*1000)},
                            {name: '龙岩市',value: Math.round(Math.random()*1000)},
                            {name: '宁德市',value: Math.round(Math.random()*1000)},
                            {name: '福州市',value: Math.round(Math.random()*1000)},
                            {name: '漳州市',value: Math.round(Math.random()*1000)},
                            {name: '泉州市',value: Math.round(Math.random()*1000)},
                            {name: '莆田市',value: Math.round(Math.random()*1000)},
                            {name: '厦门市',value: Math.round(Math.random()*1000)}
                        ];
                            option.legend = {
                                x:'right',
                                data:['随机数据']
                            };
                            option.dataRange = {
                                orient: 'horizontal',
                                x: 'right',
                                min: 0,
                                max: 1000,
                                color:['orange','yellow'],
                                text:['高','低'],           // 文本，默认为数值文本
                                splitNumber:0
                            };
                            myChart.setOption(option, true);
                    });
                }
            );
        }

    </script>
</body>
</html>
